<template>
  <div id="main" class="main"></div>
</template>

<script>
import * as echarts from "echarts";
import "echarts/map/js/china.js"; // 引入中国地图数据

export default {
  data() {
    return {
      data: [],
      titleText: "全网接通率",
    };
  },
  mounted() {
    this.$nextTick(() => {
      var myChart = echarts.init(document.getElementById("main"));
      function randomData() {
        return Math.round(Math.random() * 100);
      }
      // 绘制图表
      var optionMap = {
        tooltip: { trigger: "item" },
        grid: {
          left: 0,
          right: "10%",
          height: "100%",
          bottom: 0,
        },
        title: {
          text: this.titleText,
          x: "center",
          subtext: "99.9%",
          textAlign: "center",
          subtextStyle: {
            color: "#333333",
            fontSize: 20,
            fontWeight: "bold",
          },
          textStyle: {
            color: "#333333",
            fontSize: 14,
            fontWeight: "100",
          },
          // textVerticalAlign:'bottom'
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [""],
        },
        visualMap: {
          type: "piecewise",
          textGap: 5,
          itemGap:5,
          itemWidth:18,
          borderColor:'#fff',
          inRange:{
            color:["#0b50b9", "#c3e2f4"],
            opacity:0.5,
          },
          pieces: [
            { min: 0, max: 70, label: "0 ~ 70%", color: "#dddddd" },
            { min: 70, max: 75, label: "70% ~ 75%", color: "#86cceb" },
            { min: 75, max: 80, label: "75% ~ 80%", color: "#80c0ed" },
            { min: 80, max: 85, label: "80% ~ 85%", color: "#79aceb" },
            { min: 85, max: 90, label: "85% ~ 90%", color: "#427adb" },
            { min: 90, max: 95, label: "90% ~ 95%", color: "#1850c8" },
            { min: 95, max: 100, label: "95% ~ 100%", color: "#092b9b" },
          ],
          left: 5,
          bottom: 5,
          // text: ["高", "低"],
          calculable: false,
          color: ["#0b50b9", "#c3e2f4"],
          textStyle: {
            color: "#666666",
            fontFamily: "Microsoft YaHei",
            fontSize: 9,
            fontWeight: "500",
          },
        },
        selectedMode: "single",
        series: [
          {
            name: "",
            type: "map",
            mapType: "china",
            itemStyle: {
              normal: {
                borderColor: "#f5f5f5",
              },
              emphasis: {
                borderWidth: 1,
                borderColor: "#fff",
                areaColor: "#0b50b9",
                label: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                  },
                },
              },
            },
            showLegendSymbol: false,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            data: [
              { name: "北京", value: randomData() },
              { name: "天津", value: randomData() },
              { name: "上海", value: randomData() },
              { name: "重庆", value: randomData() },
              { name: "河北", value: randomData() },
              { name: "河南", value: randomData() },
              { name: "云南", value: randomData() },
              { name: "辽宁", value: randomData() },
              { name: "黑龙江", value: randomData() },
              { name: "湖南", value: randomData() },
              { name: "安徽", value: randomData() },
              { name: "山东", value: randomData() },
              { name: "新疆", value: randomData() },
              { name: "江苏", value: randomData() },
              { name: "浙江", value: randomData() },
              { name: "江西", value: randomData() },
              { name: "湖北", value: randomData() },
              { name: "广西", value: randomData() },
              { name: "甘肃", value: randomData() },
              { name: "山西", value: randomData() },
              { name: "内蒙古", value: randomData() },
              { name: "陕西", value: randomData() },
              { name: "吉林", value: randomData() },
              { name: "福建", value: randomData() },
              { name: "贵州", value: randomData() },
              { name: "广东", value: randomData() },
              { name: "青海", value: randomData() },
              { name: "西藏", value: randomData() },
              { name: "四川", value: randomData() },
              { name: "宁夏", value: randomData() },
              { name: "海南", value: randomData() },
              { name: "台湾", value: randomData() },
              { name: "香港", value: randomData() },
              { name: "澳门", value: randomData() },
            ],
          },
        ],
      };

      myChart.setOption(optionMap);

      myChart.on("click", (params) => {
        console.log(params);
      });
    });
  },
};
</script>

<style lang="css">
.main {
  width: 100%;
  height: 400px;
  border: 1px solid #ddd;
}
</style>